<template>
  <div class="base" ref="base">
    <div class="title">
      <div class="create_task">
        <el-button @click="create_status = true" type="primary" style="margin-left: 4px;">
          创建任务
        </el-button>
        <el-dialog
            :visible.sync="create_status"
            width="60%"
            center>
          <template #title>
            <div class='creat-box-title'>创建基础测试任务</div>
          </template>
          <div class="creat-box">
            <el-form :model="baseForm" :rules="baseRules" ref="baseForm" label-width="100px" class="demo-ruleForm">
              <el-form-item label="测试名称" prop="case_name">
                <el-select v-model="baseForm.case_name" placeholder="请选择测试用例">
                  <el-option
                      v-for="item in create_case_name_list"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="测试线路" prop="environment">
                <el-radio-group v-model="baseForm.environment">
                  <el-radio label="线上"></el-radio>
                  <el-radio label="线下"></el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="清理环境" prop="clear">
                <el-radio-group v-model="baseForm.clear">
                  <el-radio label="保留"></el-radio>
                  <el-radio label="清理"></el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="生成测试报告" prop="report_status">
                <el-radio-group v-model="baseForm.report_status">
                  <el-radio label="是"></el-radio>
                  <el-radio label="否"></el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="测试压力" prop="tools">
                <el-checkbox-group v-model="baseForm.tools">
                  <el-checkbox v-for="tools in tools_list" :label="tools" :key="tools">{{ tools }}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="执行时间" required>
                <el-col :span="11">
                  <el-form-item prop="date">
                    <el-date-picker type="date" placeholder="选择日期" v-model="baseForm.date"
                                    style="width: 100%;"></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col class="line" :span="2">-</el-col>
                <el-col :span="11">
                  <el-form-item prop="time">
                    <el-time-picker placeholder="选择时间" v-model="baseForm.time" style="width: 100%;"></el-time-picker>
                  </el-form-item>
                </el-col>
              </el-form-item>
              <el-form-item label="报警设置" prop="police" style="width: 400px">
                <el-select
                    v-model="baseForm.police"
                    placeholder="请选择报警机器人"
                    clearable
                    @click.native="get_police_list"
                    style="width: 400px;">
                  <el-option
                      v-for="item in police_list"
                      :key="item.nickname"
                      :label="item.nickname"
                      :value="item.nickname">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="备注信息" prop="remarks">
                <el-input type="textarea" v-model="baseForm.remarks"></el-input>
              </el-form-item>
              <div class="create_params_submit">
                <el-button type="primary" @click="submitForm('baseForm')">立即创建</el-button>
                <el-button @click="resetForm('baseForm')">重置</el-button>
              </div>
            </el-form>
          </div>
        </el-dialog>
      </div>
      <div class="time_search">
        <el-date-picker
            v-model="search_value"
            type="daterange"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions">
        </el-date-picker>
        <span style="margin-left: 4px">
        <el-button type="primary" icon="el-icon-search" class="time_search_button" @click="time_search">搜索</el-button>
      </span>
      </div>
    </div>
    <div class="modify-box">
      <el-dialog
          :visible.sync="dialogTableVisible"
          width="60%"
          center>
        <template #title>
          <div class='creat-box-title'>创建基础测试任务</div>
        </template>
        <div class="creat-box">
          <el-form :model="modifyForm" :rules="modify" ref="modifyForm" label-width="150px" class="demo-ruleForm">
            <el-form-item label="测试名称" prop="case_name">
              <el-select v-model="modifyForm.case_name" placeholder="请选择测试用例">
                <el-option
                    v-for="item in create_case_name_list"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="测试线路" prop="environment">
              <el-radio-group v-model="modifyForm.environment">
                <el-radio label="线上"></el-radio>
                <el-radio label="线下"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="测试压力" prop="tools">
              <el-checkbox-group v-model="modifyForm.tools">
                <el-checkbox v-for="tools in tools_list" :label="tools" :key="tools">{{ tools }}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="清理环境" prop="clear">
              <el-radio-group v-model="modifyForm.clear">
                <el-radio label="保留"></el-radio>
                <el-radio label="清理"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="生成测试报告" prop="report_status">
              <el-radio-group v-model="modifyForm.report_status">
                <el-radio label="是"></el-radio>
                <el-radio label="否"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="执行时间" required>
              <el-col :span="11">
                <el-form-item prop="date">
                  <el-date-picker type="date" placeholder="选择日期" v-model="modifyForm.date"
                                  style="width: 100%;"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col class="line" :span="2">-</el-col>
              <el-col :span="11">
                <el-form-item prop="time">
                  <el-time-picker placeholder="选择时间" v-model="modifyForm.time" style="width: 100%;"></el-time-picker>
                </el-form-item>
              </el-col>
            </el-form-item>
            <el-form-item label="报警设置" prop="police" style="width: 400px">
              <el-select
                  v-model="modifyForm.police"
                  placeholder="请选择报警机器人"
                  clearable
                  @click.native="get_police_list"
                  style="width: 400px;">
                <el-option
                    v-for="item in police_list"
                    :key="item.nickname"
                    :label="item.nickname"
                    :value="item.nickname">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="备注信息" prop="remarks">
              <el-input type="textarea" v-model="modifyForm.remarks"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitModifyForm('modifyForm')" v-if="!modify_status">提交</el-button>
              <el-button type="primary" :loading="true" @click="submitModifyForm('modifyForm')" v-else>提交</el-button>
              <el-button @click="resetForm('modifyForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-dialog>
    </div>
    <el-table
        class="table-css"
        ref="multipleTable"
        :data="this.tableData"
        stripe
        height="calc(100vh - 180px)"
        @header-click="header_click"
        @filter-change="filter_change"
        @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column
          prop="case_name"
          label="用例名称"
          width="160"
          column-key="case_name"
          :filters="case_name_list"
          :filter-method="filterHandler"
          fixed>
        <template slot-scope="scope">
          <span v-for="(obj, index) in create_case_name_list" :key="index" v-if="obj['value'] === scope.row.case_name">
            {{ obj['label'] }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
          prop="environment"
          label="环境"
          width="120"
          column-key="environment"
          :filters="environment_list"
          :filter-method="filterHandler">
      </el-table-column>
      <el-table-column
          label="状态"
          prop="status"
          column-key="status"
          :filters="status_list"
          :filter-method="filterHandler"
          width="160">
        <template slot-scope="scope">
          <span v-if="scope.row.status.toLowerCase() == 'running'">
            <el-button
                type="primary"
                style="padding: 6px 10px; margin: 0 3px 0 0; background-color: rgba(252,187,55,0.81); border-color: white; width: 71px">
              {{ scope.row.status }}
            </el-button>
          </span>
          <span v-else-if="scope.row.status.toLowerCase() == 'stop'">
            <el-button
                type="primary"
                style="padding: 6px 10px; margin: 0 3px 0 0; background-color: #a4adb6cf; border-color: white; width: 71px">
              {{ scope.row.status }}
            </el-button>
          </span>
          <span v-else-if="scope.row.status.toLowerCase() == 'success'">
            <el-button
                type="primary"
                style="padding: 6px 10px; margin: 0 3px 0 0; background-color: #6dd10abf; border-color: white; width: 71px">
              {{ scope.row.status }}
            </el-button>
          </span>
          <span v-else-if="scope.row.status.toLowerCase() == 'fail'">
            <el-button
                type="primary"
                style="padding: 6px 10px; margin: 0 3px 0 0; background-color: #FD4A4A92; border-color: white; width: 71px">
              {{ scope.row.status }}
            </el-button>
          </span>
          <span v-else>
            <el-button
                type="primary"
                style="padding: 6px 10px; margin: 0 3px 0 0; background-color: #A7A6A697; border-color: white; width: 71px">
              {{ scope.row.status }}
            </el-button>
          </span>
        </template>
      </el-table-column>
      <el-table-column
          prop="execute_user"
          label="执行人"
          column-key="execute_user"
          :filters="execute_user_list"
          :filter-method="filterHandler"
          width="120"></el-table-column>
      <el-table-column prop="create_time" label="创建时间" width="220">
        <template slot-scope="scope">
          <span>{{ time_format(scope.row.create_time) }} </span>
        </template>
      </el-table-column>
      <el-table-column prop="modify_time" label="更新时间" width="220">
        <template slot-scope="scope">
          <span>{{ time_format(scope.row.modify_time) }} </span>
        </template>
      </el-table-column>
      <el-table-column prop="police" label="报警机器人" width="150"/>
      <el-table-column prop="remarks" label="备注" width="300"/>
      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <el-button v-if="scope.row.status.toLowerCase() === 'pending'" @click="my_modify(scope.row)" type="text"
                     size="small">修改
          </el-button>
          <el-button v-else disabled @click="my_modify(scope.row)" type="text" size="small">修改</el-button>
          <el-button @click="my_detail(scope.row)" type="text" size="small">详情</el-button>
          <el-button @click="my_delete(scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
        title="测试详情"
        :visible.sync="detail_task"
        width="60%"
        center>
      <div class="detail-task">
        <el-row>
          <el-col :span="12">
            <el-form ref="detail_info" :model="detail_info" label-width="120px">
              <el-form-item label="UID">
                <el-input v-model="detail_info.uid"></el-input>
              </el-form-item>
              <el-form-item label="线路">
                <el-input v-model="detail_info.environment"></el-input>
              </el-form-item>
              <el-form-item label="用例名称">
                <el-input v-model="detail_info.case_name"></el-input>
              </el-form-item>
              <el-form-item label="更新时间">
                <el-input v-model="detail_info.modify_time"></el-input>
              </el-form-item>
              <el-form-item label="执行时间">
                <el-input v-model=" detail_info.execute_time"></el-input>
              </el-form-item>
              <el-form-item label="测试工具">
                <el-input v-model="detail_info.tools"></el-input>
              </el-form-item>
              <el-form-item label="备注">
                <el-input v-model="detail_info.remarks"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="12">
            <el-form ref="detail_info" :model="detail_info" label-width="120px">
              <el-form-item label="执行用户">
                <el-input v-model="detail_info.execute_user"></el-input>
              </el-form-item>
              <el-form-item label="测试状态">
                <el-input v-model="detail_info.status"></el-input>
              </el-form-item>
              <el-form-item label="异常信息">
                <el-input v-model="detail_info.exception"></el-input>
              </el-form-item>
              <el-form-item label="错误码">
                <el-input v-model="detail_info.error_code"></el-input>
              </el-form-item>
              <el-form-item label="错误信息">
                <el-input v-model="detail_info.error_info"></el-input>
              </el-form-item>
              <el-form-item label="报警机器人">
                <el-input v-model="detail_info.police"></el-input>
              </el-form-item>
              <el-form-item label="日志详情 :">
                <el-button @click="my_read_log(detail_info.log_path)" type="text">查看日志</el-button>
                <span style="margin: 0 10px 0 40px">测试报告:</span>
                <el-button @click="get_html(detail_info.report_path)" type="text">查看报告</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
    <el-dialog
        width="58%"
        title="日志详情"
        :visible.sync="detailLog"
        append-to-body>
          <textarea cols="110" rows="30" disabled>
            {{ log_content }}
          </textarea>
    </el-dialog>
    <el-dialog
        title="测试报告"
        :visible.sync="detailHtml"
        width="58%"
        append-to-body>
      <div ref="reportHTML" v-html="htmlText" class="web-con"></div>
    </el-dialog>
    <div class="base_bottom">
      <div class="my_select_button">
        <el-button type="primary" style="padding: 10px 15px; margin: 0 3px 0 0" @click="select_all">全选</el-button>
        <el-button type="primary" style="padding: 10px 15px; margin: 0 3px 0 0" @click="delete_all">全部删除</el-button>
      </div>
      <div class="my-pagination">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page=this.currentPage
            :page-sizes=this.pagesizes
            :page-size=this.pagesize
            layout="total, sizes, prev, pager, next, jumper"
            :total=this.total>
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import "@/my_constants"
import {
  add_test,
  get_test_info,
  delete_test_info,
  filter_handler,
  get_filter_field,
  filter_query,
  read_log,
  modify_test,
  get_police
} from "@/js/schedule_time_task";
import ElementUI from "element-ui";

export default {
  name: "GetInfo",
  beforeCreate() {
    // 提前获取详情
    get_test_info(1, 10).then(response => {
      this.tableData = response.data.data;
      this.total = response.data.total;
    })
  },
  data() {
    return {
      total: 0, //默认数据总数
      pagesizes: [10, 20, 50],//每页的数据条数
      pagesize: 10,//每页的数据条数
      currentPage: 1,
      tableData: [],
      multipleSelection: [],
      //  过滤器
      time_filter: '',
      case_name_field_filter: '',
      status_field_filter: '',
      user_field_filter: '',
      environment_field_filter: '',
      case_name_list: [],
      status_list: [],
      execute_user_list: [],
      environment_list: [],
      // 时间搜索快速获取
      search_value: '',
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      // 创建任务栏
      create_status: false,
      case_name: '',
      create_case_name_list: window._const.base_case_list,
      tools_list: window._const.tools_list,
      // 初始值
      baseForm: window._const.baseScheduleForm,
      // 报警器
      police_list: [],
      // 表单校验
      baseRules: window._const.baseScheduleRules,
      // 详情任务栏
      detail_task: false,
      detail_info: {},
      detailLog: false,
      log_content: '',
      // 测试报告
      detailHtml: false,
      htmlText: '',
      // 修改
      dialogTableVisible: false,
      modifyForm: {
        date: '',
        time: '',
      },
      modify: {
        date: [
          {type: 'date', required: true, message: '请选择日期', trigger: 'change'}
        ],
        time: [
          {type: 'date', required: true, message: '请选择时间', trigger: 'change'}
        ],
      },
      modify_status: false,
    }
  },
  methods: {
    // 时间范围
    time_search() {
      // 标准时间 转时间戳
      if (!this.search_value) {
        get_test_info(this.currentPage, this.pagesize).then(response => {
          this.tableData = response.data.data;
          this.total = response.data.total;
        })
        return
      }
      let time1 = new Date(this.search_value[0]);
      let time2 = new Date(this.search_value[1]);
      let start_time = time1.getFullYear() + '-' + (time1.getMonth() + 1) + '-' + time1.getDate()
      let end_time = time2.getFullYear() + '-' + (time2.getMonth() + 1) + '-' + time2.getDate()
      this.time_filter = {
        'time': {
          'start_time': start_time,
          'end_time': end_time
        }
      }
      let filter_params = get_filter_field(this)
      filter_query(this.currentPage, this.pagesize, filter_params).then(response => {
        this.tableData = response.data.data;
        this.total = response.data.total;
      })
    },
    // 创建任务表单
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const params = JSON.parse(JSON.stringify(this.baseForm))
          // 测试工具
          let tools = params.tools.join(',')
          params.tools = tools
          if (params.time) {
            params['execute_time'] = this.time_format(params.time)
          } else if (params.date) {
            params['execute_time'] = this.time_format(params.date)
          }
          console.log(params)
          // 用户
          params.execute_user = localStorage.getItem('username')
          // 报告
          if (params.report_status === '是') {
            params.report_status = 1
          } else {
            params.report_status = 0
          }
          add_test(params);
          this.resetForm(formName)
        } else {
          console.log('error submit!!');
          return false;
        }
        // 关闭
        this.create_status = false;
        // 刷新数据
        this.reload_data()
      });
    },
    // 更改
    submitModifyForm(formName) {
      this.modify_status = true;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const params = JSON.parse(JSON.stringify(this.modifyForm))
          let tools = params.tools.join(',')
          params.tools = tools
          if (params.time) {
            params['execute_time'] = this.time_format(params.time)
          } else if (params.date) {
            params['execute_time'] = this.time_format(params.date)
          }
          // 报告
          if (params.report_status === '是') {
            params.report_status = 1
          } else {
            params.report_status = 0
          }
          modify_test(params).then(response => {
            if (response.data.status == 'success') {
              ElementUI.Message({
                showClose: true,
                message: '更改成功',
                type: 'success'
              });
              this.resetForm(formName)
              this.dialogTableVisible = false;
              this.modify_status = false;
              this.reload_data()
            } else {
              ElementUI.Message({
                showClose: true,
                message: response.data.message,
                type: 'error'
              });
            }
          })
        } else {
          ElementUI.Message({
            showClose: true,
            message: '更改失败, 请确认参数填写确认再提交',
            type: 'error'
          });
          return false;
        }
      });
    },
    // 清空创建任务表单参数
    resetForm(formName) {
      this.modify_status = false
      this.$refs[formName].resetFields();
    },
    // 点击表头触发
    header_click(column) {
      let filter = {}
      filter['filter'] = column.property
      filter_handler(filter).then(response => {
        if (column.property === 'case_name') {
          this.case_name_list = JSON.parse(JSON.stringify(response.data.data))
        } else if (column.property === 'status') {
          this.status_list = JSON.parse(JSON.stringify(response.data.data))
        } else if (column.property === 'environment') {
          this.environment_list = JSON.parse(JSON.stringify(response.data.data))
        } else {
          this.execute_user_list = JSON.parse(JSON.stringify(response.data.data))
        }
      })
    },
    // 点击筛选触发
    filter_change(filters) {
      console.log(filters)
      let params = get_filter_field(this, filters)
      filter_query(this.currentPage, this.pagesize, params).then(response => {
        this.tableData = response.data.data;
        this.total = response.data.total;
      })
    },
    // 根据条件筛选
    filterHandler(value, row, column) {
      const property = column['property'];
      return row[property] === value;
    },
    // 分页器相关
    // 当前页数
    handleSizeChange(val) {
      this.pagesize = val;
      this.currentPage = 1;
      this.reload_data()
    },
    // 每页显示条数
    handleCurrentChange(val) {
      this.currentPage = val;
      this.reload_data()
    },
    // 取消全选
    toggleSection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggRowSelection(row);
        });
      } else {
        this.$ref.multipleSelection.clearSelection();
      }
    },
    // 点击全选或选择框时出发
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 全选
    select_all() {
      this.$refs.multipleTable.toggleAllSelection();
    },
    // 时间显示格式
    time_format(time) {
      let year = new Date(time).getFullYear();
      let month = new Date(time).getMonth() + 1 < 10 ? "0" + (new Date(time).getMonth() + 1) : new Date(time).getMonth() + 1;
      let date = new Date(time).getDate() < 10 ? "0" + new Date(time).getDate() : new Date(time).getDate();
      let hh = new Date(time).getHours() < 10 ? "0" + new Date(time).getHours() : new Date(time).getHours();
      let mm = new Date(time).getMinutes() < 10 ? "0" + new Date(time).getMinutes() : new Date(time).getMinutes();
      let ss = new Date(time).getSeconds() < 10 ? "0" + new Date(time).getSeconds() : new Date(time).getSeconds();
      return year + "-" + month + "-" + date + " " + hh + ":" + mm + ':' + ss;
    },
    // 修改
    my_modify(val) {
      this.dialogTableVisible = true;
      this.modifyForm = val
      console.log(val)
      if (typeof val.tools === 'string') {
        let tools = val.tools.split(',')
        this.modifyForm['tools'] = tools
      }
      if (val.report_status == 1) {
        this.modifyForm['report_status'] = '是'
      } else {
        this.modifyForm['report_status'] = '否'
      }
    },
    // 详情
    my_detail(val) {
      this.detail_task = true
      let info = val
      info['create_time'] = this.time_format(val['create_time'])
      info['modify_time'] = this.time_format(val['modify_time'])
      info['execute_time'] = this.time_format(val['execute_time'])
      this.detail_info = info
    },
    // 查看日志
    my_read_log(val) {
      this.detailLog = true;
      console.log(val)
      read_log(val).then(response => {
        this.log_content = response.data
      })
    },
    // 查看日志
    get_html(val) {
      this.detailHtml = true;
      console.log(val)
      read_log(val).then(response => {
        this.htmlText = response.data
      })
    },
    // 删除
    my_delete(val) {
      if (!val) {
        return
      }
      delete_test_info(val).then(response => {
      });
      // 设置延迟，实现组件刷新
      setTimeout(() => {
        this.reload_data()
      }, 300)
    },
    // 批量删除
    delete_all() {
      delete_test_info(this.multipleSelection)
      // 设置延迟，实现组件刷新
      setTimeout(() => {
        this.reload_data()
      }, 300)
    },
    // 刷新
    reload_data() {
      setTimeout(() => {
        if (this.time_filter) {
          console.log(this.time_filter)
          get_test_info(this.currentPage, this.pagesize, this.time_filter).then(response => {
            this.tableData = response.data.data;
            this.total = response.data.total;
          })
        } else if (this.field_filter) {
          console.log(this.field_filter)
          filter_query(this.currentPage, this.pagesize, this.field_filter).then(response => {
            console.log(response.data)
            this.tableData = response.data.data;
            this.total = response.data.total;
          })
        } else {
          get_test_info(this.currentPage, this.pagesize).then(response => {
            this.tableData = response.data.data;
            this.total = response.data.total;
          })
        }
      }, 1000)
    },
    // 报警
    get_police_list() {
      get_police().then(response => {
        this.police_list = response.data.data
      })
    },
  },
  watch: {
    tableData: function () {
      this.$forceUpdate()
    },
  }
}
</script>

<style>
.base {
  width: 100%;
  margin: 0 0 0 5px;

}

.base:after {
  content: '';
  clear: both;
}

/* 创建任务 */
.title {
  height: 40px;
  margin: 10px 0;
}

.title:after {
  clear: both;
}

/* 关键字搜索 */
.create_task {
  float: left;
}

/* 按时间搜索 */
.time_search {
  float: right;
  margin-right: 20px;
}

.time_search_button {
  margin-left: 2px;
}

/* 创建任务按钮 */
.create_params_submit {
  margin-top: 10px;
  margin-left: 10px;
}

/* 创建任务盒子 */
.creat-box {
  height: 460px;
  overflow: auto;
}

.creat-box-title {
  color: #868181;
  font-size: 22px;
}

.line {
  text-align: center;
}

/* --------- end --------- */
.my_select_button {
  float: left;
}

.my-pagination {
  float: right;
  font-size: 14px;
  margin-right: 20px;
}

.base_bottom {
  margin: 10px 0;
  height: 40px;
}
</style>